<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>奖励解析统计</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 20px;
        }

        textarea {
            width: 100%;
            height: 300px;
            font-family: monospace;
            font-size: 14px;
            padding: 10px;
            box-sizing: border-box;
        }

        button {
            margin-top: 10px;
            padding: 8px 16px;
            font-size: 16px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #ccc;
            padding: 6px 8px;
            text-align: center;
        }

        th {
            background-color: #f5f5f5;
        }

        #summary {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<h2>奖励 JSON 输入</h2>
<textarea id="jsonInput" placeholder="在此粘贴奖励 JSON 数据"></textarea>
<br>
<button onclick="formatJson()">格式化 JSON</button>
<button onclick="parseJson()">解析奖励</button>

<div id="resultSection" style="display:none;">
    <h3>奖励明细</h3>
    <table id="rewardTable">
        <thead>
        <tr>
            <th>等级</th>
            <th>道具ID</th>
            <th>道具数量</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h3>奖励统计</h3>
    <div id="summary"></div>
</div>

<script>
    function formatJson() {
        const input = document.getElementById('jsonInput');
        try {
            const json = JSON.parse(input.value);
            input.value = JSON.stringify(json, null, 2);
        } catch (err) {
            alert("JSON 格式错误，请检查！");
        }
    }

    function parseJson() {
        const input = document.getElementById('jsonInput').value;
        let json;
        try {
            json = JSON.parse(input);
        } catch (err) {
            alert("无法解析 JSON，请检查格式！");
            return;
        }

        if (!json.rewards) {
            alert("JSON 中缺少 'rewards' 字段！");
            return;
        }

        const tbody = document.querySelector('#rewardTable tbody');
        tbody.innerHTML = '';
        const summaryDiv = document.getElementById('summary');
        summaryDiv.innerHTML = '';
        const rewardStats = {};

        for (const level in json.rewards) {
            const rewards = json.rewards[level];
            rewards.forEach(reward => {
                const {propId, propNum} = reward;
                const row = document.createElement('tr');
                row.innerHTML = `<td>${level}</td><td>${propId}</td><td>${propNum}</td>`;
                tbody.appendChild(row);

                rewardStats[propId] = (rewardStats[propId] || 0) + propNum;
            });
        }

        summaryDiv.innerHTML = Object.entries(rewardStats)
            .map(([propId, total]) => `道具ID <strong>${propId}</strong> 总数量：<strong>${total}</strong>`)
            .join('<br>');

        document.getElementById('resultSection').style.display = 'block';
    }
</script>
</body>
</html>
